谈谈 memo

当 React 中一个组件进行更新时，它的所有子组件都会进行重新渲染，即便子组件的 props 并未发生任何改变。

是什么

1. React.memo 为高阶组件，它与 React.PureComponent 非常相似，但它适用于函数组件，但不适用于 class 组件。
2. React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState 或 useContext 的 Hook，当 context 发生变化时，它仍会重新渲染。
3. React.memo() 可以支持指定一个参数，可以相当于 shouldComponentUpdate 的作用。
4. 默认情况下其只会对复杂对象做浅层对比，如果你想要自定义比较（针对 props 中的某一指定属性），那么请将自定义的比较函数通过第二个参数传入来实现。

示例

预览地址

浅比较

当 props 改变（step/count/number 任意一个），就触发重新渲染

export default memo((props = {}) => {
  return (
    <div>
      <p>step is : {props.step}</p>
      <p>count is : {props.count}</p>
      <p>number is : {props.number}</p>
    </div>
  );
});

自定义比较（开启第二参数）

针对 props 中的某一指定属性：只有 props.number 改变才会重新渲染

import React, { memo } from "react";

// 自定义比较：只有 props.number 改变才会重新渲染
const isEqual = (prevProps, nextProps) => {
  if (prevProps.number !== nextProps.number) {
    return false;
  }
  return true;
};

export default memo((props = {}) => {
  return (
    <div>
      <p>step is : {props.step}</p>
      <p>count is : {props.count}</p>
      <p>number is : {props.number}</p>
    </div>
  );
}, isEqual);

参考文章

• React.memo 与 useMemo